<template>
  <div class="settings">

    <div class="settings-content">
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <h3>通知设置</h3>
          </div>
        </template>
        
        <el-form label-width="120px">
          <el-form-item label="邮件通知">
            <el-switch v-model="settings.emailNotify" active-text="开启" inactive-text="关闭" />
            <div class="form-tip">接收课程更新、考试提醒等邮件通知</div>
          </el-form-item>
          
          <el-form-item label="推送通知">
            <el-switch v-model="settings.pushNotify" active-text="开启" inactive-text="关闭" />
            <div class="form-tip">接收浏览器推送消息</div>
          </el-form-item>
          
          <el-form-item label="学习提醒">
            <el-switch v-model="settings.studyRemind" active-text="开启" inactive-text="关闭" />
            <div class="form-tip">每日学习提醒，帮助您保持学习习惯</div>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <h3>显示设置</h3>
          </div>
        </template>
        
        <el-form label-width="120px">
          <el-form-item label="主题模式">
            <el-radio-group v-model="settings.theme">
              <el-radio value="light">浅色模式</el-radio>
              <el-radio value="dark">深色模式</el-radio>
              <el-radio value="auto">跟随系统</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="字体大小">
            <el-slider v-model="settings.fontSize" :min="12" :max="20" :step="1" show-input />
            <div class="form-tip">调整页面字体大小，默认14px</div>
          </el-form-item>
          
          <el-form-item label="页面布局">
            <el-radio-group v-model="settings.layout">
              <el-radio value="comfortable">舒适</el-radio>
              <el-radio value="compact">紧凑</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <h3>学习设置</h3>
          </div>
        </template>
        
        <el-form label-width="120px">
          <el-form-item label="自动播放">
            <el-switch v-model="settings.autoPlay" active-text="开启" inactive-text="关闭" />
            <div class="form-tip">课程视频自动播放下一节</div>
          </el-form-item>
          
          <el-form-item label="播放速度">
            <el-select v-model="settings.playbackSpeed" style="width: 120px">
              <el-option value="0.5" label="0.5x" />
              <el-option value="0.75" label="0.75x" />
              <el-option value="1" label="1x" />
              <el-option value="1.25" label="1.25x" />
              <el-option value="1.5" label="1.5x" />
              <el-option value="2" label="2x" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="字幕显示">
            <el-switch v-model="settings.showSubtitle" active-text="开启" inactive-text="关闭" />
            <div class="form-tip">显示视频字幕</div>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <h3>隐私设置</h3>
          </div>
        </template>
        
        <el-form label-width="120px">
          <el-form-item label="个人资料">
            <el-radio-group v-model="settings.profileVisibility">
              <el-radio value="public">公开</el-radio>
              <el-radio value="friends">仅好友</el-radio>
              <el-radio value="private">私密</el-radio>
            </el-radio-group>
            <div class="form-tip">控制谁可以看到您的学习记录</div>
          </el-form-item>
          
          <el-form-item label="学习进度">
            <el-switch v-model="settings.showProgress" active-text="公开" inactive-text="隐藏" />
            <div class="form-tip">是否公开显示您的学习进度</div>
          </el-form-item>
        </el-form>
      </el-card>

      <div class="settings-actions">
        <el-button type="primary" @click="saveSettings">保存设置</el-button>
        <el-button @click="resetSettings">恢复默认</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const settings = ref({
  // 通知设置
  emailNotify: true,
  pushNotify: false,
  studyRemind: true,
  
  // 显示设置
  theme: 'light',
  fontSize: 14,
  layout: 'comfortable',
  
  // 学习设置
  autoPlay: true,
  playbackSpeed: '1',
  showSubtitle: true,
  
  // 隐私设置
  profileVisibility: 'public',
  showProgress: true
})

const saveSettings = () => {
  localStorage.setItem('userSettings', JSON.stringify(settings.value))
  ElMessage.success('设置保存成功！')
  applySettings()
}

const resetSettings = () => {
  ElMessageBox.confirm('确定要恢复默认设置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    settings.value = {
      emailNotify: true,
      pushNotify: false,
      studyRemind: true,
      theme: 'light',
      fontSize: 14,
      layout: 'comfortable',
      autoPlay: true,
      playbackSpeed: '1',
      showSubtitle: true,
      profileVisibility: 'public',
      showProgress: true
    }
    saveSettings()
  })
}

const applySettings = () => {
  // 应用主题
  document.documentElement.setAttribute('data-theme', settings.value.theme)
  
  // 应用字体大小
  document.documentElement.style.fontSize = settings.value.fontSize + 'px'
  
  // 应用布局样式
  document.body.className = settings.value.layout === 'compact' ? 'compact-layout' : ''
}

const loadSettings = () => {
  const saved = localStorage.getItem('userSettings')
  if (saved) {
    settings.value = { ...settings.value, ...JSON.parse(saved) }
  }
  applySettings()
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings {
  padding: 20px;
  background: #f0f8ff;
  min-height: calc(100vh - 140px);
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.card-header h3 {
  margin: 0;
  color: #2c5aa0;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.settings-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

@media (max-width: 768px) {
  .settings-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .settings-actions .el-button {
    width: 100%;
    max-width: 200px;
  }
}
</style>